<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./swiper-4.4.2/dist/css/swiper.css">
  <style>
    body, html {
      position: relative;
      height: 100%;
    }
    .swiper-container {
      height: 100%;
    }

    body {
      margin: 0;
      background: #eee;
    }

    .slide-demo {
      height: 100px;
      text-align: center;
      line-height: 100px;
      background: #fff;
    }
    .swiper-wrapper {
      position: relative;
    }
    .refresh, .loadmore {
      position: absolute;
      height: 100px;
      text-align: center;
      width: 100%;
      line-height: 100px;
    }
    .refresh {
      bottom: 100%;
    }
    .loadmore {
      top: 100%;
    } 
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="refresh">释放刷新</div>
      <div class="swiper-slide slide-demo">slide1</div>
      <div class="swiper-slide slide-demo">slide2</div>
      <div class="swiper-slide slide-demo">slide3</div>
      <div class="swiper-slide slide-demo">slide4</div>
      <div class="swiper-slide slide-demo">slide5</div>
      <div class="swiper-slide slide-demo">slide6</div>
      <div class="swiper-slide slide-demo">slide7</div>
      <div class="swiper-slide slide-demo">slide8</div>
      <div class="swiper-slide slide-demo">slide9</div>
      <div class="swiper-slide slide-demo">slide10</div>
      <div class="loadmore">加载更多</div>
    </div>
    <div class="swiper-scrollbar"></div>
  </div>
  <script src="./swiper-4.4.2/dist/js/swiper.js"></script>
  <script>
    var page = 1
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 'auto',
      setWrapperSize: true,
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: true
      },
      on: {
        touchEnd: function () {
          // console.log(this.translate)
          if (this.translate >= 100) {
            // 进行相关操作
            this.touchEventsData.isTouched = false // 取消默认的回滚操作
            this.setTransition(this.params.speed)
            this.setTranslate(100)
            this.$el.find('.refresh').text('加载中')
            this.allowTouchMove = false

            var _this = this
            // 加载新的数据 ajax请求
            setTimeout(function () {
              // _this.removeAllSlides();
              var data = ['new_slide1', 'new_slide2', 'new_slide3']
              for (var i = data.length - 1; i >= 0; i--) {
                // 需要把数据渲染成slide并且添加到最前
                _this.prependSlide('<div class="swiper-slide slide-demo">' + data[i] + '</div>')
              }
              _this.allowTouchMove = true
              _this.setTranslate(0)
              _this.$el.find('.refresh').text('释放刷新')
            }, 1000)
          }

          if (this.translate < this.size - this.virtualSize  - 100) {
            page++
            this.setTransition(this.params.speed)
            this.setTranslate(this.size - this.virtualSize  - 100)
            this.touchEventsData.isTouched = false // 取消默认的回滚操作
            this.allowTouchMove = false
            this.$el.find('.loadmore').text('加载中')
            var _this = this
            setTimeout(function () {
              for(var i = 1; i <= 20; i++) {
                _this.appendSlide('<div class="swiper-slide slide-demo">第' + page + '页： ' + i + '</div>')
              }
              // 恢复拖拽
              _this.allowTouchMove = true
            }, 1000)
            
          }
        }
      }
    })

    /* 
      1 需要判断松开鼠标时的下拉距离

        on: {
          touchend: function () {

          }
        }

        判断这个距离是否大于100
        this.translate
        
      2 判断成功后，我们需要将释放刷新停留在100px位置
        this.setTranslate(100)  可以设置对应的滑动距离
        this.setTransition(300)
        
        this.params 可以获取到swiper所有的配置参数
      
      3 找到.refresh 修改里面的内容
        this.$el.find('.refresh')

      4 禁用拖拽效果
        this.allowTouchMove = false

      5 请求数据并渲染到页面中



      上拉加载
      1 判断是否到达底部
        1) 获取文档高度 this.virtualSize
        2) 获取视口高度 this.size
     */
  </script>

</body>
</html>